<template>
  <div id="app">
    <el-menu
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
    >
      <el-menu-item>
        <div style="width: calc(10vw - 40px)"></div>
      </el-menu-item>
      <el-menu-item v-for="navitem in header.list" :index="navitem.routeName" :class="{ 'active-text-color' : navitem.routeName === header.activeRoute }" :key="navitem.routeName" @click="changeRoute(navitem)">
        {{ navitem.name }}
      </el-menu-item>
      <div style="position: absolute;right: 0;padding: 20px;color: #fff" v-if="username">
        欢迎<span style="margin-left: 15px">{{username}}</span>
      </div>
    </el-menu>
    <div class="container">
        <router-view :key="$route.fullPath" />
    </div>
    <el-dialog
      :visible.sync="loginFormVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      title="登录"
    >
      <el-form :model="loginForm">
        <el-form-item label="Email" label-width="90px">
          <el-input v-model="loginForm.email" type="email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="Password" label-width="90px">
          <el-input v-model="loginForm.password" type="password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="display: flex;justify-content: space-between">
          <el-button @click="LoginorRegister" type="text">没有账号？去注册</el-button>
          <el-button type="primary" @click="loginSubmit">登录</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      :visible.sync="registerFormVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      title="注册"
    >
      <el-form :model="registerForm">
        <el-form-item label="Email" label-width="90px">
          <el-input v-model="registerForm.email" type="email" autocomplete="off" @blur="checkEmail"></el-input>
        </el-form-item>
        <el-form-item label="Username" label-width="90px">
          <el-input v-model="registerForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="Password" label-width="90px">
          <el-input v-model="registerForm.password" type="password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="display: flex;justify-content: space-between">
          <el-button type="text" @click="LoginorRegister">已有账号，去登录</el-button>
          <el-button type="primary" @click="registerSubmit">注册</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'App',
  data () {
    return {
      header: {
        list: [
          {
            name: '活动展示',
            url: 'home',
            show: true,
            routeName: 'Home'
          },
          {
            name: '创建活动',
            url: 'create_activity',
            show: true,
            routeName: 'Create'
          }
        ],
        activeRoute: 'Home'
      },
      loginFormVisible: false,
      registerFormVisible: false,
      loginForm: {
        email: '',
        password: ''
      },
      registerForm: {
        email: '',
        password: '',
        username: ''
      },
      registerIsVaild: true,
      username: null
    }
  },
  created () {
    if (!this.$store.state.user.user) {
      this.loginFormVisible = true
    } else {
      this.username = this.$store.state.user.user.username
    }
    if (!this.$route.name) {
      this.$router.push(this.$route.path)
    }
    console.log(this.$route)
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    ...mapMutations('user', [
      'saveUser'
    ]),
    LoginorRegister () {
      this.loginFormVisible = !this.loginFormVisible
      this.registerFormVisible = !this.registerFormVisible
    },
    loginSubmit () {
      this.axios.post(
        'login/',
        { email: this.loginForm.email, password: this.loginForm.password }
      ).then(res => {
        if (res.result) {
          this.saveUser(res.data)
          this.username = res.data.username
          this.loginFormVisible = false
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    checkEmail () {
      if (this.registerForm.email.indexOf('@') === -1) {
        this.registerIsVaild = false
        this.$message({
          message: '账号不合法',
          type: 'warning'
        })
      } else {
        this.axios.post(
          'check_email/',
          { email: this.registerForm.email }
        ).then(res => {
          if (!res.result) {
            this.registerIsVaild = false
            this.$message({
              message: res.message,
              type: 'warning'
            })
          } else {
            this.registerIsVaild = true
          }
        })
      }
    },
    registerSubmit () {
      if (this.registerIsVaild) {
        this.axios.post(
          'register/',
          { ...this.registerForm }
        ).then(res => {
          this.registerFormVisible = false
          this.saveUser({...this.registerForm})
          this.username = this.registerForm.username
          this.$message({
            message: '注册成功!',
            type: 'success'
          })
        })
      } else {
        this.$message({
          message: '账号已存在!',
          type: 'warning'
        })
      }
    },
    changeRoute (item) {
      if (this.header.activeRoute !== item.routeName) {
        this.header.activeRoute = item.routeName
        this.$router.push(item.url)
      }
    }
  }
}
</script>

<style>
body{
  margin: 0
}
.container{
  margin: 0 10vw;
  border: 2px solid #fefefe;
  height: calc(100vh - 65px);
}
.active-text-color {
  color: #ffd04b !important;
  border-bottom-color: #ffd04b !important;
}
</style>
